<template>
	<view class="sfz-content">

		<view class="sc-zheng">
			<template v-if="zmURL">
				<image class="sc-p-img" :src="zmURL" mode="" @click.stop="handlePreview(zmURL)"></image>
			</template>
			<template v-else>
				<image class="sc-p-img"
					src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/sfz_zheng.png"
					mode=""></image>
				<view class="sc-desc" @click="handleUpload('zheng')">
					<image class="sc-d-icon"
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/sfz_add_icon.png"
						mode=""></image>
					<view class="sc-d-text">上传人像面</view>
				</view>
			</template>
			<view class="media-delte" @click.stop="handleDel('zheng')" v-if="zmURL">
				<uni-icons type="closeempty" size="13" color="rgb(255, 255, 255)"></uni-icons>
			</view>
		</view>

		<view class="sc-fan">
			<template v-if="fmURL">
				<image class="sc-p-img" :src="fmURL" mode="" @click.stop="handlePreview(fmURL)"></image>
			</template>
			<template v-else>
				<image class="sc-p-img"
					src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/sfz_fan.png"
					mode=""></image>
				<view class="sc-desc" @click="handleUpload('fan')">
					<image class="sc-d-icon"
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/sfz_add_icon.png"
						mode=""></image>
					<view class="sc-d-text">上传国徽面</view>
				</view>
			</template>
			<view class="media-delte" @click.stop="handleDel('fan')" v-if="fmURL">
				<uni-icons type="closeempty" size="13" color="rgb(255, 255, 255)"></uni-icons>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/config'

	export default {
		name: "uploadSFZ",
		data() {
			return {
				zmURL: '',
				fmURL: '',
				requestFlag: true, // 请求开关		
			};
		},
		props: {
			bossBackImgUrl: { // 内部预览图片区域和选择图片按钮的区域宽度，单位rpx，不能是百分比，或者auto
				type: String,
			},
			bossJustImgUrl:{
				type: String,
			}
		},
		watch: {
			bossBackImgUrl: {
				handler(val) {
					this.fmURL = val
				},
				immediate: true,
				deep: true
			},
			bossJustImgUrl: {
				handler(val) {
					this.zmURL = val
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 校验文件格式
			async checkFormat(url) {
				return new Promise((resolve, reject) => {
					this.$request({
						method: 'POST',
						url: '/user-center/new-terminal/ocrCard',
						data: {
							cardType: '1', //1:身份证识别，2:营业执照识别，3：行驶证识别
							imageUrl: url
						}
					}).then((res) => {
						resolve(res.respCode === 200)
					}).catch(e => {
						reject(e)
						uni.showToast({
							title: '上传图片格式错误',
							icon: 'none',
						})
						this.requestFlag = true
					})
				})
			},
			handleUpload(type) {
				if (!this.requestFlag) {
					uni.showToast({
						title: '上传中',
						icon: 'none'
					})
					return false
				}
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success: (res) => {
						// 文件类型	
						this.requestFlag = false
						res.tempFiles.forEach(i => {
							uni.uploadFile({
								url: `${baseUrl}/user-center/app-file/upload-file`,
								filePath: i.tempFilePath,
								name: 'file',
								formData: {
									user: 'test'
								},
								header: {
									'Authorization': 'Bearer ' + uni.getStorageSync(
										'access_token'),
									"Content-Type": "multipart/form-data",
								},
								success: async (res) => {
									const result = JSON.parse(res.data)
									const fileName = result.datas.split('/').at(-1)
									const url = result.datas

									const checkRes = await this.checkFormat(url)
									// 校验通过
									if (checkRes) {
										uni.showToast({
											title: '上传成功',
											icon: 'success',
										})
										this.requestFlag = true

										if (type === 'zheng') {
											this.zmURL = url
										} else {
											this.fmURL = url
										}
										this.$emit('handleURL', {
											type,
											url
										})
									}
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
									this.requestFlag = true
								}
							});
						})
					}
				})
			},
			handleDel(type) {
				if (type === 'zheng') {
					this.zmURL = ''
				} else {
					this.fmURL = ''
				}
				this.$emit('handleDelURl', type)
			},
			handlePreview(url) {
				uni.previewImage({
					current: 0,
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sfz-content {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		gap: 18rpx;

		.sc-zheng,
		.sc-fan {
			width: 100%;
			position: relative;
			z-index: 1;

			.sc-p-img {
				height: 238rpx;
				width: 100%;
			}

			.sc-desc {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.sc-d-icon {
					width: 42rpx;
					height: 42rpx;
				}

				.sc-d-text {
					margin-top: 18rpx;
					font-size: 14px;
					color: #CF1A1B;
				}
			}

			.media-delte {
				position: absolute;
				top: 0;
				right: 0;
				background-color: #373737;
				height: 20px;
				width: 20px;
				display: flex;
				flex-direction: row;
				border-bottom-left-radius: 100px;
				align-items: center;
				justify-content: center;
				z-index: 3;

				/deep/ .uni-icons {
					// line-height: 14px;
					// position: absolute;
					// right: 2rpx;
					// top: 2rpx;
				}
			}
		}
	}
</style>